<template>
    <div>
        <Button v-hasC="listbutshow.but" type="primary" class="ivu-mb-8" @click="handleupdate(false)">添加全局通用配置</Button>
        <JG-table
            :data="listdata"
            :total="total"
            :butshow="listbutshow"
            :columns="listcolumns"
            :disabledhover="true"
              :maxHeight="600"
            @handleDelete="handleDelete">
        </JG-table>
        <Modal
            v-model="update"
            title="添加全局通用配置"
            @on-cancel="canceledit"
            >
            <Form ref="modalname" :model="params" :rules="ruleInline" :label-width="100" >
                <FormItem label="配置名称:" prop="swt_id" >
                    <Select v-model="params.swt_id" placeholder="请选择配置项"  @on-change="changeSelect" style="width:280px">
                        <template v-for="item in namedata">
                            <Option  :disabled="item.swtDisabled" :value="item.id" :key="item.id">{{ item.name }}</Option>
                        </template>
                    </Select>
                </FormItem>
                <FormItem label="值：" prop="value">
                    <Input v-model="params.value" placeholder="请填写配置名称内容" style="width:280px"/>
                </FormItem>

            </Form>
            <div slot="footer">
                <Button @click="canceledit">取消</Button>
                <Button  type="primary" :loading="modal_loading"  @click="submitedit">保存</Button>
            </div>
        </Modal>
        <Modal
            v-model="modaldel"
            title="删除提醒"
            @on-cancel="cancel" width="420">
            <p >确定要删除当前项目的默认配置？</p>
            <p >删除后数据将无法恢复</p>
            <div slot="footer">
                <Button type="error" :loading="modal_loading" @click="del">确定删除</Button>
                <Button @click="cancel">取消</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import { swtswtgetswt, swtswtupdateswt, swtswtdeleteswt, swtswtdeleteswtvalue, swtProject, createProject, deleteSwt } from '@api/business'
    export default {
        name: 'tablename1',
        data () {
            return {
                modalname: 'modalname',
                total: -1,
                nameloading: false,
                namedata: [],
                listcolumns: [
                    { title: '配置列表', key: 'name', minWidth: 100 },
                    { title: '值', key: 'value', minWidth: 80 },
                    { title: '操作', slot: 'businessAdaction1', fixed: 'right', width: 80 }
                ],
                listdata: [],
                listbutshow: {
                    but: {
                        name: '-v1-swt-swt-create-swt-project',
                        flag: '/v1/swt/swt/create-swt-project'
                    },
                    Delete: {
                        name: '-v1-swt-swt-delete-swt-project',
                        flag: '/v1/swt/swt/delete-swt-project'
                    }
                },
                params: { swt_id: '', name: '', value: '' },
                ruleInline: {
                    value: [{ required: true, message: '请填写配置名称内容', trigger: 'blur' }],

                    swt_id: [{ required: true, message: '请选择配置项', trigger: 'change' }]
                },
                update: false,
                modaldel: false,
                modal_loading: false,
                edit: true
            };
        },

        mounted () {
            this.initial()
        },

        methods: {
            initial () {
                this.askData();
                this.getwbw()
            },
            // 切换数据
            changeSelect (val) {
                console.log(val, 'val')
            },
            askData () {
                this.nameloading = true
                swtProject().then(res => {
                    this.listdata = res
                    this.nameloading = false
                })
            },
            getwbw () {
                swtswtgetswt().then(res => {
                    this.namedata = res.map(item => ({
                        ...item, swtDisabled: false
                    }))
                })
            },
            handleDelete (row) {
                this.params.id = row.id
                this.edit = false
                this.modaldel = true
            },
            cancel () {
                this.params = { name: '', value: '', id_value: '', swt_id: '' }
                this.modaldel = false
            },
            del () {
                deleteSwt({ id: this.params.id }).then(res => {
                    this.$Message.success('删除默认成功');
                    this.cancel()
                    this.askData()
                })
            },
            handleupdate (bool) {
                this.edit = bool
                this.namedata.forEach(item => {
                    this.listdata.forEach(it => {
                        if (item.id == it.swt_id) { item.swtDisabled = true }
                    })
                })
                this.update = true
            },
            canceledit () {
                this.$refs.modalname.resetFields();
                this.params = { name: '', value: '', id_value: '', swt_id: '' }
                this.update = false
            },
            submitedit () {
                this.$refs.modalname.validate((valid) => {
                    if (valid) {
                        this.namedata.forEach(item => {
                            if (+item.id === +this.params.id) this.params.name = item.name
                        })
                        this.modal_loading = true
                        createProject(this.params).then(res => {
                            this.$Message.success('添加默认成功');
                            this.canceledit()
                            this.askData()
                            this.modal_loading = false
                        })
                    }
                })
            }
        }
    };
</script>

<style lang="scss" scoped>

</style>
